<template>
  <div style="margin: 20px">

    <div
      style="display: flex; justify-content: space-between; font-size: 16px; border-bottom: 1px solid #ccc; padding-bottom: 5px">
      <div>
        <span class="el-icon-tickets" style="margin-right: 15px"></span>
        <span>告警配置</span>
      </div>
      <div class="top-button">
        <el-button size="mini" type="primary" @click="handleAdd()">新增</el-button>
      </div>
    </div>

    <div class="warningForm" style="margin-top: 5px">
      <el-form ref="gridHeadLayout" :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input
            v-model="formInline.warningName"
            size="mini"
            placeholder="请输入告警名称">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formInline.isEnable" size="mini" placeholder="请选择是否启用">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="top-button">
          <el-button size="mini" icon="el-icon-search" @click="handleSearch"></el-button>
          <el-button size="mini" icon="el-icon-refresh-right" @click="handleEmpty"></el-button>
        </el-form-item>
      </el-form>
    </div>

    <div style="max-height: calc(100vh - 245px);height: calc(100vh - 245px); overflow: auto;">
      <el-row v-if="tableData.length" style="margin-top: 20px">
        <div class="warning-card">
          <el-col :span="6" v-for="(item, index) in tableData" :key="index">
            <el-card shadow="hover" style="font-size: 14px; padding-bottom: 10px; margin-right: 10px;margin-bottom: 10px">
              <div style="margin-bottom: 10px">
                <div style="padding: 20px 20px 5px 20px">
                  <div class="point-head" style="position: relative;font-size: 18px; font-weight: bold; margin-bottom: 10px;">
                    {{ item.warningName }}
                    <span
                      :style="{
						  			display: 'inline-block',
						  			height: '8px',
						  			width: '8px',
										background: item.isEnable === 1 ? 'rgb(10, 191, 91)' : 'rgb(229, 69, 69)',
						  			borderRadius: '7px',
						  			verticalAlign: 'middle',
						  			marginLeft: '10px',
						  			marginBottom: '5px'}">
                  </span>
                    <el-tooltip class="item" v-if="item.isEnable == 0" effect="dark" content="编辑" placement="top">
                      <a style="font-size: 14px; position: absolute; right: 0" @click="handleEdit(item)">
                        <span class="el-icon-edit" style="font-size: 18px;color: #1677FF"></span>
                      </a>
                    </el-tooltip>
                  </div>
                  <div class="point-content" style="margin-bottom: 10px">
                    <div style="margin: 16px 6px 0 0px">
                      <span style="color: #646a73">设备名称：</span>
                      <span style="color: #1677ff;">{{ item.equipmentName }}</span>
                    </div>
                    <div style="margin: 16px 6px 0 0px">
                      <span style="color: #646a73">点位名称：</span>
                      <span style="color: #1677ff;">{{ item.pointName }}</span>
                    </div>
                  </div>
                  <el-divider></el-divider>
                </div>

                <div style="padding: 0 20px 0 20px;">
                  <div style="float: left">
                    <el-button size="mini" type="primary" v-if="item.isEnable == 1" style="margin: 5px"
                               @click="handleRestart(item)">重启
                    </el-button>
                    <el-button size="mini" type="primary" v-if="item.isEnable == 0" style="margin: 5px"
                               @click="rowEnable(item)">启用
                    </el-button>
                    <el-button size="mini" v-if="item.isEnable == 1" style="margin: 5px"
                               @click="rowClose(item)">禁用
                    </el-button>
                    <el-button size="mini" v-if="item.isEnable == 0" style="margin: 5px"
                               @click="handleRemove(item)">删除
                    </el-button>
                  </div>
                  <div style="float: right">
                    <el-button type="text" @click="handleView(item)" size="small">更多信息</el-button>
                  </div>
                </div>
              </div>

            </el-card>
          </el-col>
        </div>
      </el-row>
    </div>

    <el-empty
      v-if="tableData.length==0"
      style="width: 100%"
      description="暂无数据"
      :image-size="120"
    ></el-empty>
    <div class="block" style="float: right;" v-if="page.total !== 0">
      <el-pagination
        background
        :current-page="page.currentPage"
        :page-sizes="[8, 16, 32, 64, 128]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @current-change="handlePageChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
  </div>

</template>

<script>
import {page as getPage, remove, updateStatus, restart} from '@/api/warning/warning-api'

export default {
  name: "warningConfig",
  data() {
    return {
      formInline: {},
      tableData: [],
      options: [],
      warningCount: 0,
      page: {
        pageSize: 8,
        currentPage: 1,
        total: 0
      }
    }
  },
  mounted() {
    this.options = this.$store.state.dict.dictDatas.is_enable
    this.onLoad(this.page)
  },
  methods: {
    handleSizeChange(item) {
      this.page.pageSize = item
      this.onLoad(this.page)
    },
    handlePageChange(item) {
      this.page.currentPage = item
      this.onLoad(this.page)
    },
    rowEnable(row) {
      let data = row
      data.isEnable = 1
      updateStatus(data).then(() => {
        row.isEnable = 1
        this.$message.success("启用成功！");
        this.onLoad(this.page)
      })
    },
    handleRestart(row) {
      restart(row.id).then((res) => {
        if (res) {
          this.$message.success("重启成功！");
          this.onLoad(this.page)
        } else {
          this.$message.error("重启失败！");
        }
      })
    },
    rowClose(row) {
      let data = row
      data.isEnable = 0
      updateStatus(data).then(() => {
        row.isEnable = 0
        this.$message.success("禁用成功！");
        this.onLoad(this.page)
      })
    },
    handleAdd() {
      this.$router.push({
        path: `/warning/configuration/Add`,
        query: {
          type: 'add',
        }
      })
    },
    handleEdit(item) {
      this.$router.push({
        path: `/warning/configuration/Add`,
        query: {
          type: 'edit',
          id: item.id
        }
      })
    },
    handleView(item) {
      this.$router.push({
        path: `/warning/configuration/Add`,
        query: {
          type: 'view',
          id: item.id
        }
      })
    },
    handleRemove(item) {
      this.$confirm("确定将选择数据删除", {
        confirmButtonText: "确定",
        cancelButtonText: "删除",
        type: "warning"
      }).then(() => {
        remove(item.id).then(res => {
          this.$message.success("删除成功！");
          this.onLoad(this.page)
        })
      })
    },
    // 鼠标在盒子上移动
    onMouseOver(str, index) {
      const tag = this.$refs[str][index]
      if (tag) {
        const parentWidth = tag.parentNode.offsetWidth // 获取元素父级可视宽度
        const contentWidth = tag.offsetWidth // 获取元素可视宽度
        this.isTextOverflow = contentWidth <= parentWidth
      }
    },
    parseTime(item) {
      if (!item.createTime) return '';
      const date = new Date(item.createTime);
      if (isNaN(date.getTime())) return '';
      return date.toLocaleString();
    },
    handleSearch() {
      this.page.currentPage = 1
      this.onLoad(this.page, this.formInline)
    },
    handleEmpty() {
      this.formInline = {}
      this.onLoad(this.page)
    },
    onLoad(page, params = {}) {
      this.page = page;
      getPage(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.formInline)
      ).then(res => {
        const data = res.data;
        this.page.total = data.total;
        this.warningCount = data.total;
        this.tableData = data.records;
      });
    },
  }
};
</script>
<style scoped>
.warning-card ::v-deep .el-card__body {
  padding: 0 !important;
}

.warning-card ::v-deep .el-divider--horizontal {
  margin: 0;
}

.warningForm ::v-deep .el-form-item {
  margin-bottom: 0;
}

.top-button ::v-deep .el-button + .el-button {
  margin-left: 0;
}

.cardBigBox {
  width: calc(100% - 24px);
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  background-color: #ffffff;
  align-content: flex-start;

  .cardbox {
    width: 24%;
    box-shadow: 0 0 5px #dde9ef;
    border: 1px solid #e7eff3;
    border-radius: 10px;
    margin: 16px 6px 0 6px;
    cursor: pointer;

    .cardTop {
      padding: 16px;

      .topContent {
        .instruction {
          white-space: nowrap; /* 防止文本换行 */
          overflow: hidden; /* 隐藏超出容器的文本 */
          text-overflow: ellipsis; /* 用省略号表示被截断的文本 */
          cursor: pointer; /* 当鼠标悬停时显示手形光标，提示用户有tooltip */
          font-size: 20px;
          color: #333;
          text-align: center;
        }

        .topItem {
          font-size: 15px;
          color: #666;
          line-height: 30px;
        }
      }
    }

    .cardBottom {
      font-size: 14px;
      line-height: 25px;
      display: flex;
      border-top: 1px solid #dcdfe6;
      justify-content: space-between;

      .statusContent {
        display: flex;
        align-items: center;

        .iconCard {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: red;
          margin: 10px 6px;
        }
      }
    }
  }
}

.block {
  //position: absolute;
  bottom: 0;
  width: calc(100% - 48px);
  padding: 12px 24px;
  background-color: #ffffff;
  display: flex;
  flex-direction: row-reverse;
}
</style>
